<template>
	<view class="commenMessage">
		<view v-for="(item,index) in pageResult.list" :key="index" class="line" @click="clickFun(index)">
			<view class="left">
				<image :src="item.icon" mode="aspectFill"></image>
				<view class="dot" v-if="item.isRead==0"></view>
			</view>
		
			<view class="right">
				<view class="top"> 
					<view class="txt1 txtwid" >{{item.title}}</view> 
					<text class="txt1" style="width:200rpx">{{item.time}}</text>
				</view>
				<view> 
					<text class="txt">{{item.content}}</text> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {				
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					type: 9,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getList() {
				var self = this;
				self.pageParam.page++
				serve
					.request({
						url: '/member/message/list',
						data: self.pageParam
					})
					.then(res => {
						if (res.data && res.data.length > 0) {
							self.pageResult.list=self.pageResult.list.concat(res.data);
						}
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0; 
					});
			},
			clickFun(key) {
				var item = this.pageResult.list[key];
				if(item.isRead == 0) {
					serve
						.request({
							url: '/member/message/view',
							data: {
								appkey: uni.getStorageSync('appkey'),
								'access-token': uni.getStorageSync('access-token'),
								id: item.id
							}
						})
						.then(res => {
							if(res.code != 200) {
								uni.showToast({
									title: res.message,
									icon : 'none'
								});
								return ;
							} 
							item.isRead = 1;
							if(item.jump_type == '' || item.jump_type == 'message_view') {
								this.jump('message_view', item.id);
								return ;
							} else {
								this.jump(item.jump_type, item.data_id);
								return ;
							}
						});
					return ;
				}
				if(item.jump_type == '' || item.jump_type == 'message_view') {
					this.jump('message_view', item.id);
					return ;
				} else {
					this.jump(item.jump_type, item.data_id);
					return ;
				}
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.pageParam.type = options.type || 0;
			if(this.pageParam.type == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('message_index')
						}, 2000) 
					}
				});
			}
			wx.setNavigationBarTitle({
				title: options.type == 1 ? "系统通知" : (options.type == 2 ? "点赞" : "评论与回复"),
			});
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page = 0;
			this.pageResult.list = [];
			this.getList();
		},
		onReachBottom() {
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.commenMessage {
		width: 100%;

		.line {
			box-sizing: border-box;
			padding: 50rpx 30rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx rgba(57, 72, 107, 0.1) solid;
			background: #FFFFFF;

			.left {
				width: 100rpx;
				height: 100rpx;
				position: relative;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}


				.dot {
					position: absolute;
					top: 4rpx;
					right: 4px;
					width: 20rpx;
					height: 20rpx;
					background: rgba(235, 89, 56, 1);
					border-radius: 50%;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 540rpx;

				.top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.txt {
					font-size: 28rpx;
					color: rgba(60, 72, 104, 1);
				}

				.txt1 {
					font-size: 28rpx;
					color: rgba(60, 72, 104, 0.5);
				}

				.txtwid {
					width: 400rpx;	
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}

			}
		}
	}
</style>
